<template>
  <el-row type="flex" justify="center" align="middle" class="login">
    <el-form ref="form" :model="form" label-width="60px">
      <div class="formBox">
        <div class="login_title">果乐新闻后台管理系统</div>

        <div class="login_form">
          <el-form-item label="账号" >
            <el-input v-model="form.username" placeholder="用户名/手机号码"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="form.password" type="password" placeholder="输入密码"></el-input>
          </el-form-item>

          <el-form-item style="margin-left: 14px;">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button style="margin-left: 50px;" @click="reSet">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },

  methods: {
    onSubmit() {
      if (!this.form.username || !this.form.password) {
        this.$message.error("请填写完整信息");
        return;
      }

      this.$axios({
        url: "/login",
        method: "POST",
        data: this.form
      }).then(res => {
        console.log("登录返回结果", res);

        if (res.data.message == "登录成功") {
          this.$message.success("登录成功");

          let userToken = localStorage.setItem(
            "userToken",
            res.data.data.token
          );
          let userInfo = localStorage.setItem(
            "userInfo",
            JSON.stringify(res.data.data.user)
          );

          this.$router.push("/");
        }

        if(res.data.message == "用户不存在"){
            this.$message.error("用户不存在，请重新输入！");

            this.form = {}
        }
        
      });
    },

    reSet() {
      this.form = {
        username: "",
        password: ""
      };
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  background: url("../assets/adminbg.jpg");
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;

  .formBox {
    position: relative;
    top: -50px;

    .login_title {
      text-align: center;
      height: 76px;
      line-height: 76px;
      font-weight: bold;
      font-size: 26px;
      color: #fff;
    }

    .login_form {
      background-color: rgba(255, 255, 255, .2);
      padding: 30px 40px 10px 16px;
      border-radius: 8px;

      /deep/ .el-form-item__label {
        font-weight: bold;
        font-size: 16px;
        color:rgba(255, 255, 255, .8);
      }

      .el-input {
        width: 260px;
      }
    }
  }
}
</style>